import React, { Component } from 'react';
import { Image } from 'antd';
import {
  SheetList,
  SheetItem
} from './style';
import { tranNumber } from '../../utils'
class SongSheet extends Component {
  render () {
    const { sheets } = this.props
    return (
      <SheetList>
        {
          sheets.map(item => {
            return (
              <SheetItem key={item.get('id')}>
                <div className="wrapper">
                  <div className="cover">
                    <div className="image">
                      <Image
                        src={item.get('coverImgUrl') || item.get('picUrl') + '?param=150y150'}
                      />
                    </div>
                    <div className="count">
                      <i className="arrow"></i>
                      <span>{tranNumber(item.get('playCount'), 0)}</span>
                    </div>
                  </div>
                </div>
                <div className="info">
                  <h2 className="name ellipsis-two">{item.get('name')}</h2>
                </div>
              </SheetItem>
            )
          })
        }
      </SheetList>
    )
  }
}

export default SongSheet;